import React from 'react'

// layout
import GoBackLayout from "../../../../layouts/GoBackLayout/GoBackLayout"

// antd-mobile
import {WhiteSpace, WingBlank} from "antd-mobile"
import './LevelList.css'
import LevelModel from "../../../../model/Level";
import LvMark from "../../../../shared-components/LvMark/LvMark";

const LevelList = props => {

    const {history} = props
    const data = []

    for (let i = 1; i < 51; i++) {
        let m = new LevelModel(i)
        let level = i
        let exp = m.getCurrentLevelExp(level)
        data.push({level, exp : exp,})
    }

    // for (let i = 11; i < 21; i++) {
    //     let m = new LevelModel(i)
    //     let level = i
    //     let exp = m.getCurrentLevelExp(level)
    //     data.push({level, exp : exp,})
    // }
    //
    // for (let i = 21; i < 31; i++) {
    //     let m = new LevelModel(i)
    //     let level = i
    //     let exp = m.getCurrentLevelExp(level)
    //     data.push({level, exp : exp,})
    // }



    // const data = [
    //     {level: '1', exp: '0',},
    //     {level: '2', exp: '10',},
    //     {level: '3', exp: '55',},
    //     {level: '4', exp: '145',},
    //     {level: '5', exp: '290',},
    //     {level: '6', exp: '500',},
    //     {level: '7', exp: '785',},
    //     {level: '8', exp: '960',},
    //     {level: '9', exp: '1105',},
    //     {level: '10', exp: '1365',},
    //     {level: '11', exp: '1365',},
    //     {level: '12', exp: '1365',},
    //     {level: '13', exp: '1365',},
    //     {level: '14', exp: '1365',},
    //     {level: '15', exp: '1365',},
    //     {level: '16', exp: '1365',},
    //     {level: '17', exp: '1365',},
    //     {level: '18', exp: '1365',},
    //     {level: '19', exp: '1365',},
    //     {level: '20', exp: '1365',},
    //     {level: '21', exp: '1365',},
    //     {level: '22', exp: '1365',},
    // ]

    const titleTemplate = (
        <div className='flex-space-between-align-center level-list-title'>
            <p>等级</p>
            <p>所需经验</p>
            <p>等级图标</p>
        </div>
    )

    const levelListTemplate = (
        data.map(d => {

            const {level, exp,} = d

            let iconCls = 'level-list-icon'
            if (level < 10) {
                iconCls += ' level-list-icon-1-9'
            } else if (level < 20 && level >= 10) {
                iconCls += ' level-list-icon-10-19'
            } else {
                iconCls += ' level-list-icon-20-29'
            }

            const template = (
                <div key={level}>
                    <WhiteSpace/>
                    <div className='flex-space-between-align-center'>
                        <p>{level}</p>
                        <p>{exp}</p>
                        {/*<p className={iconCls}>Lv.{level}</p>*/}
                        <LvMark lv={level}/>
                    </div>
                </div>
            )
            return template
        })
    )

    return (
        <GoBackLayout
            history={history}
            title='等级说明表'
        >
            <WingBlank>
                <WhiteSpace/>
                {titleTemplate}
                {levelListTemplate}
            </WingBlank>
        </GoBackLayout>
    )
}

export default LevelList

